<template>
  <div class="content">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary" @click.native="backpage">返回</el-button>
    </div>
    <div class="seachlist">
      <div class="itemseach">
        <div class="name">方案编号</div>
        <el-input v-model="code" style="width:300px;"></el-input>
      </div>
      <div class="itemseach">
        <div class="name">方案名称</div>
        <el-input v-model="name" style="width:300px;"></el-input>
      </div>
      <div class="itemseach">
        <div class="name">有效日期</div>
        <el-date-picker
          v-model="datelen"
          style="width:300px;"
          type="daterange"
          range-separator="至"
          value-format="timestamp"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="itemseach" style="width:100%;">
        <div class="name">适用场景</div>
        <el-input type="textarea" v-model="place" :rows="2" style="width:70%;" placeholder="请输入内容"></el-input>
      </div>
      <div class="itemseach">
        <div class="name">一级分类</div>
        <el-select v-model="one_class" clearable placeholder="请选择">
          <el-option
            v-for="item in selectParam.one"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="itemseach">
        <div class="name">二级分类</div>
        <el-select v-model="two_class" clearable placeholder="请选择">
          <el-option
            v-for="item in selectParam.two"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="select">
      <div class="headerset">
        <div class="zy">媒体资源</div>
        <el-button type="text" @click.native="clickadd">选择资源</el-button>
      </div>
      <div class="listwarp">
        <el-table
          :data="allResource.slice(resStart,resEnd)"
          :cell-style="$rowstyle"
          :header-cell-style="$headerstyle"
          border
          style="width: 100%"
        >
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <el-table-column prop="get_top.name" align="center" label="部门/单位"></el-table-column>
          <el-table-column prop="get_media.name" align="center" label="媒体"></el-table-column>
          <el-table-column prop="get_resource.name" label="资源类型" align="center"></el-table-column>
          <el-table-column prop="resources_name" align="center" label="资源名称"></el-table-column>
          <el-table-column prop="get_program.name" align="center" label="节目位置"></el-table-column>
          <el-table-column align="center" width="230" label="播放周期">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.timelen"
                type="daterange"
                style="width:200px;"
                range-separator="至"
                value-format="timestamp"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changetime($event,scope.row,scope.$index)"
              ></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column align="center" width="120" label="长度（S）">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.setlong"
                @change="longchange($event,scope.row,scope.$index)"
                style="width:90px;"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in scope.row.longselect"
                  :key="item.id"
                  :label="item.long"
                  :value="item.long"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column align="center" width="120" label="数量">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.setnum"
                style="width:90px;"
                @change="numchange($event,scope.row,scope.$index)"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in scope.row.numselect"
                  :key="item.id"
                  :label="item.num"
                  :value="item.num"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="费用占比" align="center" width="100">
            <template slot-scope="scope">
              <el-input v-model="scope.row.ratio"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="setprice" align="center" label="价格"></el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="70">
            <template slot-scope="scope">
              <el-button @click="delRes(scope)" type="text" size="small">删除</el-button>
              <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            @current-change="handleSelecResChange"
            :page-size="3"
            :total="allResource.length"
          ></el-pagination>
        </div>
      </div>
      <div class="listwarp" style="margin-top:40px;">
        <!-- <div class="listname">产品</div> -->
        <div class="headerset">
          <div class="zy">产品</div>
          <el-button type="text" @click.native="setproduct">选择产品</el-button>
        </div>
        <el-table
          :data="selectProList.slice(prostart,proend)"
          :cell-style="$rowstyle"
          :header-cell-style="$headerstyle"
          border
          style="width: 100%"
        >
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <el-table-column prop="code" align="center" label="方案编号" width="100"></el-table-column>
          <el-table-column prop="name" align="center" label="方案名称"></el-table-column>
          <el-table-column label="有效日期" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.effective_start}}~{{scope.row.effective_end}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="get_one_class.name" align="center" label="一级分类"></el-table-column>
          <el-table-column prop="get_two_class.name" align="center" label="二级分类"></el-table-column>

          <el-table-column label="费用占比" align="center" width="140">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cost"></el-input>
              <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
              <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="70">
            <template slot-scope="scope">
              <el-button @click="delSelectPro(scope)" type="text" size="small">删除</el-button>
              <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            @current-change="handleSelectProChange"
            :page-size="3"
            :total="selectProList.length"
          ></el-pagination>
        </div>
      </div>
      <div class="one">
        <div class="money">
          <div class="names">套餐费用</div>
          <el-input v-model="money" style="width:100px"></el-input>
          <div class="get">万元</div>
          <el-input v-model="second" style="width:100px"></el-input>
          <div class="get">秒</div>
        </div>
        <div class="money">
          <div class="names">限定行业</div>
          <el-checkbox v-model="checked" style="margin-right:10px;">除</el-checkbox>
          <el-select v-model="trade" collapse-tags multiple placeholder="请选择">
            <el-option
              v-for="item in selectParam.trade"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="money">
          <div class="names">共享</div>
          <el-radio v-model="share" label="1">共享</el-radio>
          <el-radio v-model="share" label="0">不共享</el-radio>
        </div>
        <div class="money" style="height:50px;">
          <div class="names">适用范围</div>
          <!-- <div class="fw">哎呀呀呀</div> -->
          <el-button type="text" @click="setpeople">选择范围</el-button>
        </div>
        <div class="money">
          <div class="names">附件</div>
          <el-upload
            :action="$src+'/api/upload'"
            name="file"
            class="upload-demo"
            :multiple="false"
            :limit="1"
            :file-list="file_list"
            :on-success="successfile"
            accept=".xls, .xlsx, .pdf, .doc, .docx"
            :on-remove="remove"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
        <div class="money">
          <div class="names">状态</div>
          <el-radio v-model="status" label="1">草稿</el-radio>
          <el-radio v-model="status" label="2">提交</el-radio>
        </div>
      </div>
      <div class="two">
        <el-button type="primary" @click.native="savesubmit">提交</el-button>
        <el-button type="primary">返回</el-button>
      </div>
    </div>
    <!-- select -->
    <div class="prop" v-if="select">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          选择资源内容
          <!-- <p class="close1" @click="setselect">关闭</p> -->
          <el-button type="text" class="close1" @click="setselect">关闭</el-button>
        </div>
        <div class="proptab">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="资源" name="first">
              <div class="selectinput">
                <div class="selectitem">
                  <div class="selectname">单位</div>
                  <el-select v-model="Resource.door_id" style="width:150px;" placeholder="请选择">
                    <el-option
                      v-for="item in selectobj.door"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
                <div class="selectitem">
                  <div class="selectname">媒介</div>
                  <el-select v-model="Resource.medium_id" style="width:150px;" placeholder="请选择">
                    <el-option
                      v-for="item in selectobj.medium"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
                <div class="selectitem">
                  <div class="selectname">媒体</div>
                  <el-select v-model="Resource.media_id" style="width:150px;" placeholder="请选择">
                    <el-option
                      v-for="item in mediaSelect"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
                <div class="selectitem" style="width:33%;">
                  <div class="selectname" style="width:90px;">关键字</div>
                  <el-input v-model="Resource.search_word"></el-input>
                </div>
                <div class="selectitem" style="width:40%;margin-left:20px;">
                  <el-button type="primary" icon="el-icon-search" @click="Resourceseach">搜索</el-button>
                </div>
              </div>
              <div class="zylist">
                <el-table
                  :data="addResourceList"
                  border
                  :cell-style="$rowstyle"
                  :header-cell-style="$headerstyle"
                  style="width: 100%"
                >
                  <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
                  <el-table-column align="center" prop="resources_name" label="资源名"></el-table-column>
                  <el-table-column prop="get_resource.name" align="center" label="广告类型"></el-table-column>
                  <el-table-column prop="is_split" label="长度（S）" align="center"></el-table-column>
                  <el-table-column prop="get_program.name" label="位置" align="center"></el-table-column>
                  <el-table-column prop="price" label="价格" align="center" width="80"></el-table-column>
                  <el-table-column label="操作" align="center" width="50">
                    <template slot-scope="scope">
                      <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
                      <el-checkbox
                        v-model="scope.row.status"
                        @change="changestatus($event,scope.row)"
                      ></el-checkbox>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleAddChange"
                    :current-page.sync="addResourcePage"
                    :page-size="3"
                    layout="prev, pager, next, jumper"
                    :total="addResourceTotal"
                  ></el-pagination>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="类型" name="third">
              <div class="listone">
                <div class="listitem">
                  <div class="names">单位</div>
                  <el-select v-model="typeParam.door_id" placeholder="请选择">
                    <el-option
                      v-for="item in typeSelect.door"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
                <div class="listitem">
                  <div class="names">类型</div>
                  <el-select v-model="typeParam.resources_id" placeholder="请选择">
                    <el-option
                      v-for="item in typeSelect.type"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>

                <div class="listitem">
                  <div class="names">数量</div>
                  <el-input type="number" v-model="typeParam.number" style="width:200px;"></el-input>
                </div>
                <div class="listitem">
                  <div class="names">必选资源</div>
                  <el-input style="width:200px;"></el-input>
                  <el-button type="text" @click.native="settypeprop">选择</el-button>
                </div>

                <div class="listitem listitem1">
                  <el-button>加入</el-button>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="prop" v-if="product">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          选择产品
          <!-- <p class="close1" @click="setproduct">关闭</p> -->
          <el-button type="text" class="close1" @click="setproduct">关闭</el-button>
        </div>
        <div class="proptab">
          <div class="selectinput">
            <div class="selectitem" style="width:40%;margin-right:20px;">
              <div class="selectname" style="width:100px;">播出日期</div>
              <el-date-picker
                v-model="proParam.time"
                style="width:250px;"
                type="daterange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
            <div class="selectitem" style="width:33%;">
              <div class="selectname" style="width:100px;">一级分类</div>
              <el-select v-model="proParam.one_class" style="width:150px;" placeholder="请选择">
                <el-option
                  v-for="item in selectParam.one"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="selectitem" style="width:33%;">
              <div class="selectname" style="width:100px;">二级分类</div>
              <el-select v-model="proParam.two_class" style="width:150px;" placeholder="请选择">
                <el-option
                  v-for="item in selectParam.two"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>

            <div class="selectitem" style="width:33%;">
              <div class="selectname" style="width:90px;">关键字</div>
              <el-input v-model="proParam.search_name" style="width:150px;"></el-input>
            </div>
            <div class="selectitem" style="width:20%;margin-left:20px;">
              <el-button type="primary" @click="seachPro" icon="el-icon-search">搜索</el-button>
            </div>
          </div>
          <div class="zylist">
            <el-table
              :data="AddProductList"
              border
              :cell-style="$rowstyle"
              :header-cell-style="$headerstyle"
              style="width: 100%"
            >
              <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
              <el-table-column align="center" prop="name" label="方案名称"></el-table-column>
              <el-table-column align="center" label="有效日期">
                <template slot-scope="scope">
                  <span>{{scope.row.effective_start}}~{{scope.row.effective_end}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="get_one_class.name" label="一级分类" align="center" width="90"></el-table-column>
              <el-table-column prop="get_two_class.name" label="二级分类" align="center"></el-table-column>

              <el-table-column label="操作" width="50">
                <template slot-scope="scope">
                  <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">选择</el-button> -->
                  <el-checkbox
                    v-model="scope.row.status"
                    @change="changeProstatus($event,scope.row)"
                  ></el-checkbox>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleProChange"
                :current-page.sync="proPage"
                :page-size="3"
                layout="prev, pager, next, jumper"
                :total="ProTotal"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="prop propd" v-if="typeprop">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:400px">
        <div class="propheader">
          资源
          <!-- <p class="close1">关闭</p> -->
          <el-button type="text" class="close1" @click="settypeprop"> 关闭</el-button>
        </div>
        <div class="proptab">
          <div class="zylist gdlists" style="height:270px;">
            <el-table
              :data="typeList"
              border
              :cell-style="$rowstyle"
              :header-cell-style="$headerstyle"
              style="width: 100%"
              @selection-change="handleChange"
            >
              <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
              <el-table-column prop="resources_name" label="资源名称" align="center"></el-table-column>

              <el-table-column label="操作" type="selection" align="center" width="50">
                <!-- <template slot-scope="scope">
                  <el-button @click="n(scope.row)" type="text" size="small">选择</el-button>
                </template> -->
              </el-table-column>
            </el-table>
           
          </div>
          <div style="width:50px;margin:0 auto;margin-top:30px;"> <el-button type="primary">关闭</el-button></div>
        </div>
      </div>
    </div>

    <div class="prop propd" v-if="peoplestatus">
      <div style="height:100px;width:100%"></div>
      <div class="warpprop" style="width:600px;height:480px;">
        <div class="propheader">
          选择范围
          <!-- <p class="close1">关闭</p> -->
          <el-button type="text" class="close1" @click="setpeople">关闭</el-button>
        </div>
        <div class="door">
          <div class="dooritem">
            <el-tree
              :data="doorList"
              show-checkbox
              node-key="id"
              ref="tree"
              @check-change="changetree"
              :props="defaultProps"
            ></el-tree>
          </div>
          <div class="dooritem">
            <el-table
              :data="people"
              border
              :cell-style="$rowstyle"
              :header-cell-style="$headerstyle"
              style="width: 100%"
              ref="multipleTable"
              @selection-change="handleSelectionChange"
            >
              <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
              <el-table-column prop="name" label="姓名" align="center"></el-table-column>

              <el-table-column type="selection" width="50">
                <!-- <template slot-scope="scope">
                  <el-button @click="n(scope.row)" type="text" size="small">选择</el-button>
                </template>-->
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div style="width:50px;margin:0 auto;">
          <el-button @click="savepeople" type="primary" style="margin:0 auto;">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Media_Resources,
  getMedia_Resources_list,
  Add_Product,
  Product_Plann,
  door_people,
  postProduct_Plann
} from "../../api/Salesman.js";
import { SETDATE, getDoorList } from "../../api/System.js";
export default {
  data() {
    return {
      value1: "",
      value: "",
      typeList:[],
      defaultProps: {
        children: "children",
        label: "name"
      },

      select: false,
      product: false,
      currentPage3: 1,

      checked: false,
      list: [{ name: "xxx" }, { name: "xxx" }, { name: "xxx" }],
      activeName: "first",
      Resource: {
        media_id: "",
        door_id: "",
        medium_id: "",
        search_word: ""
      },
      //类型参数
      typeParam: {
        door_id: "",
        resources_id: "",
        number: ""
      },
      typeSelect: {},
      mediaSelect: [],
      addResourcePage: 1,
      addResourceTotal: 0,
      addResourceList: [],
      selectobj: {},
      //选中的资源
      allResource: [],

      //产品查询到的列表
      AddProductList: [],
      proPage: 1,
      ProTotal: 0,
      //选中的产品列表
      selectProList: [],
      //行业  一级分类   二级分类
      selectParam: {},
      proParam: {
        time: [],
        one_class: "",
        two_class: "",
        search_name: ""
      },
      //产品分页
      prostart: 0,
      proend: 3,
      //资源分页
      resStart: 0,
      resEnd: 3,

      productParam: {
        effective_start: "",
        effective_end: "",
        one_class: "",
        two_class: "",
        search_name: ""
      },
      //部门列表
      doorList: [],
      treeList: [],
      //获取到的人列表
      people: [],
      //选中的人
      onepeople: [],
      typeprop:false,
      //最终选中的人
      okpeople: [],
      peoplestatus: false,
      //文件列表
      file_list: [],
      //新建方案时参数
      code: "",
      name: "",
      datelen: [],
      place: "",
      money: "",
      second: "",
      one_class: "",
      two_class: "",
      fith_path: "",
      trade: [],
      except: 0,
      share: "1",
      status: "1"
    };
  },
  created() {
    this.getdoor();
    this.getResources_select_list();
    this.getResources_type_list();
    //查询产品列表
    // this.getAdd_Product();
    //行业。一级分类   二级分类
    this.getProduct_Plann();
  },
  methods: {
    handleChange(e){
    console.log(e)
    },
    //获取资源列表类型
    getTYPEMedia_Resources() {
      var data = {
        door_id: this.typeParam.door_id,
        resources_id: this.typeParam.resources_id,
        type: 2
      };
       Media_Resources(data).then(res=>{
        console.log(res)
        if(res.code==200){
          this.typeList=res.data
        }
       })
    },
    settypeprop(){
      if(!this.typeprop){
        this.getTYPEMedia_Resources()
      }
    this.typeprop=!this.typeprop
    },
    //点击提交
    savesubmit() {
      if (this.datelen.length < 2) {
        this.$message({
          message: "有效日期不能为空",
          type: "warning"
        });
        return;
      }
      var arr = [];
      this.okpeople.forEach(element => {
        arr.push(element.id);
      });
      var medium = [];
      this.allResource.forEach(element => {
        medium.push({
          medium_public_id: element.id,
          number: element.setnum,
          cost: element.setprice,
          door_id: element.get_top.id,
          resource_id: element.get_resource.id,
          air_date: element.timelen.join(","),
          long: element.setlong,
          cost_ratio: element.ratio
        });
      });
      //产品
      var middle = [];
      this.selectProList.forEach(element => {
        middle.push({
          id: element.id,
          cost: element.cost
        });
      });
      var data = {
        code: this.code,
        name: this.name,
        effective_start: this.datelen[0] / 1000,
        effective_end: this.datelen[1] / 1000,
        place: this.place,
        fith_path: this.fith_path,
        money: this.money,
        second: this.second,
        except: this.checked ? "1" : "0",
        trade: this.trade.join(","),
        use: arr.join(","),
        status: this.status,
        share: this.share,
        one_class: this.one_class,
        two_class: this.two_class,
        medium: medium,
        middle: middle
      };
      console.log(data);
      postProduct_Plann(data).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            message: "新建成功",
            type: "success"
          });
          this.$router.push({ path: "/salesman2/flproductow" });
        }
      });
    },
    //文件上传成功
    successfile(res) {
      console.log(res);
      if (res.code == 200) {
        this.fith_path = res.data.path;
      }
    },
    //移除文件
    remove(e) {
      this.fith_path = "";
    },
    changetime(event, row, index) {
      row.longselect = [];
      row.numselect = [];
      row.setprice = "";
      row.setlong = "";
      row.setnum = "";

      if (!event) {
        return;
      }
      var time = event;
      var start = time[0];
      var end = time[1];
      var long = [];
      var num = [];
      var falg = false;
      var priceList = row.get_medium_price;
      priceList.forEach(element => {
        if (typeof element.time == "string") {
          element.time = JSON.parse(element.time);
        }
        if (element.time[0] * 1000 <= start && element.time[1] * 1000 >= end) {
          long.push(element);
          falg = true;
        }
      });
      if (!falg) {
        this.$message({
          message: "该资源中无此播放周期",
          type: "warning"
        });
        row.timelen = [];
        this.$set(this.allResource, index + this.resStart, row);

        return;
      }
      row.longselect = long;
      this.$set(this.allResource, index + this.resStart, row);
    },
    //长度改变
    longchange(event, row, index) {
      var num = [];
      var list = row.longselect;
      list.forEach(element => {
        if (element.long == event) {
          num.push(element);
        }
      });
      row.numselect = num;
      this.$set(this.allResource, index + this.resStart, row);
    },
    //数量改变
    numchange(event, row, index) {
      var num = event;
      let list = row.numselect;
      list.forEach(element => {
        if (num == element.num) {
          row.setprice = element.money;
        }
      });
      this.$set(this.allResource, index + this.resStart, row);
      console.log(row);
    },
    //设置范围弹窗
    setpeople() {
      if (this.peoplestatus) {
        this.people = [];
      }
      this.peoplestatus = !this.peoplestatus;
    },
    handleSelectionChange(e) {
      this.onepeople = e;
    },
    //按照部门查找人
    getdoorpeople(data) {
      door_people(data).then(res => {
        if (res.code == 200) {
          this.people = res.data;
          // this.$refs.multipleTable.toggleRowSelection(this.people[0],true)

          //  this.people.forEach(element => {
          //    this.onepeople.forEach(el => {
          //       if(element.id==el.id){
          //         console.log("xxx")
          //          this.$nextTick(()=>{
          //         this.$refs.multipleTable.toggleRowSelection(element,true)

          //         })
          //       }
          //    });
          //  });
        }
      });
    },
    savepeople() {
      this.okpeople = [];
      this.okpeople = this.okpeople.concat(this.onepeople);
      this.setpeople();
    },
    changetree() {
      this.treeList = this.$refs.tree.getCheckedKeys();
      this.getdoorpeople({ door_id: this.treeList });
    },
    //获取部门
    getdoor() {
      getDoorList().then(res => {
        if (res.code == 200) {
          this.doorList = res.data;
        }
      });
    },
    //选中资源页数变化
    handleSelecResChange(e) {
      this.resStart = e * 3 - 3;
      this.resEnd = e * 3;
    },
    //选中的产品页数变化
    handleSelectProChange(e) {
      this.prostart = e * 3 - 3;
      this.proend = e * 3;
    },
    //点击搜索
    seachPro() {
      var data = {
        effective_start: this.proParam.time[0] / 1000,
        effective_end: this.proParam.time[1] / 1000,
        one_class: this.proParam.one_class,
        two_class: this.proParam.two_class,
        search_name: this.proParam.search_name
      };
      this.productParam = data;
      this.proPage = 1;
      this.ProTotal = 0;

      this.getAdd_Product();
    },
    //获取行业。一级分类  二级分类
    getProduct_Plann() {
      Product_Plann().then(res => {
        if (res.code == 200) {
          this.selectParam = res.data;
        }
      });
    },
    //获取产品
    getAdd_Product() {
      var data = { ...this.productParam };
      data.page = this.proPage;
      data.per = 3;

      Add_Product(data).then(res => {
        if (res.code == 200) {
          this.AddProductList = res.data.data;
          this.proPage = res.data.current_page;
          this.ProTotal = res.data.total;
          this.AddProductList.forEach(element => {
            element.status = false;
            element.effective_start = SETDATE(element.effective_start, true);
            element.effective_end = SETDATE(element.effective_end, true);
            this.selectProList.forEach(el => {
              if (el.id == element.id) {
                element.status = true;
              }
            });
          });
        }
      });
    },
    //删除选中的产品
    delSelectPro(scope) {
      var index = scope.$index + this.prostart;
      this.selectProList.splice(index, 1);
      if (index == this.selectProList.length) {
        if ((this.selectProList.length / 3) % 1 == 0) {
          if (this.prostart > 0) {
            this.prostart = this.prostart - 3;
            this.proend = this.proend - 3;
          }
        }
      }
    },
    //删除选中的资源
    delRes(scope) {
      var index = scope.$index + this.resStart;
      this.allResource.splice(index, 1);
      if (index == this.allResource.length) {
        if ((this.allResource.length / 3) % 1 == 0) {
          if (this.resStart > 0) {
            this.resStart = this.resStart - 3;
            this.resEnd = this.resEnd - 3;
          }
        }
      }
    },
    //选中产品时的状态改变
    changeProstatus(event, row) {
      if (event) {
        row.longselect = [];
        row.numselect = [];
        row.setnum = "";
        row.setlong = "";
        row.setprice = "";

        this.selectProList.push(row);
      } else {
        var id = row.id;
        for (let index = 0; index < this.selectProList.length; index++) {
          const element = this.selectProList[index];
          if (element.id == id) {
            this.selectProList.splice(index, 1);
          }
        }
      }
    },
    //产品选择页数改变
    handleProChange(e) {
      this.proPage = e;
      this.getAdd_Product();
    },
    setproduct() {
      if (!this.product) {
        // this.productParam={
        //   effective_start: "",
        // effective_end: "",
        // one_class: "",
        // two_class: "",
        // search_name: ""
        // }
        this.getAdd_Product();
      }
      this.product = !this.product;
    },

    //获取资源的下拉列表
    getResources_select_list() {
      getMedia_Resources_list({ type: 1 }).then(res => {
        if (res.code == 200) {
          this.selectobj = res.data;
          // console.log(res.data.type)
        }
      });
    },
    //获取类型下拉
    getResources_type_list() {
      getMedia_Resources_list({ type: 2 }).then(res => {
        if (res.code == 200) {
          // this.selectobj=res.data
          this.typeSelect = res.data;
        }
      });
    },
    //点击搜索资源
    Resourceseach() {
      this.page = 1;
      this.getAddlist();
    },
    handleAddChange(e) {
      this.addResourcePage = e;
      this.getAddlist();
    },
    clickadd() {
      this.getAddlist();
      this.setselect();
    },
    changestatus(event, row) {
      //  console.log(row)
      //  console.log(event)
      if (event) {
        this.allResource.push(row);
      } else {
        var id = row.id;
        for (let index = 0; index < this.allResource.length; index++) {
          const element = this.allResource[index];
          if (element.id == id) {
            this.allResource.splice(index, 1);
          }
        }
      }
    },
    
    //获取资源列表
    getAddlist() {
      let data = { ...this.Resource };
      data.page = this.addResourcePage;
      data.per = 3;
      data.type = 1;
      Media_Resources(data).then(res => {
        if (res.code == 200) {
          this.addResourceList = res.data.data;
          this.addResourcePage = res.data.current_page;
          this.addResourceTotal = res.data.total;
          this.addResourceList.forEach(element => {
            element.status = false;
            this.allResource.forEach(el => {
              if (el.id == element.id) {
                element.status = true;
              }
            });
          });
        }
      });
    },
    backpage() {
      this.$router.push({ path: "/salesman2/flproductow" });

      // this.$router.go(-1);
    },
    setselect() {
      this.select = !this.select;
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    handleCurrentChange() {},
    handleSizeChange() {}
  },
  watch: {
    "Resource.medium_id": {
      deep: true,
      handler: function(newV, oldV) {
        // this.add_resources();
        this.Resource.media_id = "";
        this.selectobj.medium.forEach(element => {
          if (this.Resource.medium_id == element.id) {
            this.mediaSelect = element.get_data_array;
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.gdlists{
  overflow-y: auto;
}
.seachlist {
  width: 97%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .itemseach {
    display: flex;
    align-items: center;
    width: 50%;
    margin-top: 20px;
    .name {
      width: 100px;
    }
  }
}
.select {
  width: 97%;
  margin: 0 auto;
  margin-top: 20px;
  .headerset {
    display: flex;
    align-items: center;
    .zy {
      width: 100px;
    }
  }
  .listwarp {
    width: 98%;
    margin: 0 auto;
    margin-top: 10px;
    .block {
      float: right;
      margin-top: 0px;
      height: 30px;
    }
    .listname {
      height: 30px;
      line-height: 30px;
    }
  }
  .one {
    width: 97%;
    margin: 0 auto;
    margin-top: 20px;
    .money {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .names {
        width: 100px;
      }
      .get {
        margin-left: 6px;
        margin-right: 6px;
      }
      .fw {
        margin: 0 6px;
      }
    }
  }
  .two {
    width: 100px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    margin-bottom: 100px;
    margin-top: 40px;
  }
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.warpprop {
  width: 900px;
  height: 420px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .proptab {
    width: 95%;
    margin: 0 auto;
    .selectinput {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .selectitem {
        width: 33%;
        // margin-bottom: 15px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        .selectname {
          width: 60px;
        }
      }
    }
    .zylist {
      width: 95%;
      margin: 0 auto;
      margin-top: 10px;
      .block {
        margin-top: 5px;
        float: right;
      }
    }
    .listone {
      width: 50%;
      margin: 0 auto;
      .listitem1 {
        justify-content: center;
      }
      .listitem {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .names {
          width: 100px;
        }
      }
    }
  }
}
.propd {
  z-index: 999;
}
.door {
  width: 95%;
  margin: 0 auto;
  height: 350px;
  display: flex;
  margin-top: 30px;
  .dooritem {
    width: 50%;
    height: 100%;
    overflow-y: auto;
  }
}
.gdlists::-webkit-scrollbar {/*滚动条整体样式*/

        width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/

        height: 1px;

    }

.gdlists::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

        border-radius: 10px;

         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        background: #535353;

    }

.gdlists::-webkit-scrollbar-track {/*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        border-radius: 10px;

        background: #EDEDED;

}
</style>